<template>
  <div id="per">
     
    <div id="upload">
                  <!--elementui的上传图片的upload组件-->
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    list-type="picture-card"
                    action="localhost:3000/users/uploadHeadPic"
                    :limit="1"  
                    :before-upload="beforeupload"
                    :auto-upload="false"
                    :multiple="false"
                    :show-file-list="true"
                  >
                    <i class="el-icon-plus" ></i>
                  </el-upload>

                  <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">确认提交</el-button>
                      <el-button>取消</el-button>
                    </el-form-item>
                  </el-form>
                </div> 
  </div>
</template>
<script>
export default {
  data() {
    
    return {
      users: [],
      
	// fileList: [],
      	form: {
       		// name: "" //绑定表单元素的属性
     	 },
      	param: "" // 表单最后提交的参数对象
    };
  },
  methods: {
   onSubmit() {
      // let _this = this;
      // var names = _this.form.name;
      this.$refs.upload.submit();
      //将非表单元素的数据也添加到参数对象中；
      // this.param.append("company_id", _this.company_id);
      //设置提交请求头，适用于上传文件
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      // //调用接口，执行上传所有数据的操作
      this.$axios
        .post("http://localhost:3000/users/upload", this.param, config)
        .then(function(result) {
          console.log(result);
             alert("上传成功")
        });
     
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //当上传文件组件submit之前触发执行
    beforeupload(file) {
      console.log(file);
      // 准备表单上传需要的参数对象
      this.param = new FormData();
      this.param.append(`head`, file);
      return false;
    },
  }

};
</script>
<style  scoped>
#per{
 width: 500px;
  height: 380px;
  position:absolute;
  left:25%;
  top:30%;
  margin-left:200px;
  margin-top:-40px;
  border-radius: 5px;
  /* background-color: rgb(169, 233, 109); */
  padding:20px 50px 10px 10px;
}
</style>